<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test15</title>
		<style>
			body
			{
				background-color: black;
			}
			#lebout
			{
				stroke-dasharray: 160;
				stroke-dashoffset: 310;
				transition: 1s;
			}
			#lebin
			{
				stroke-dasharray: 100;
				stroke-dashoffset: 0;
				transition: 1s;
			}
			#leyetop
			{
				transition: 1s;
			}
			#rebout
			{
				stroke-dasharray: 168;
				stroke-dashoffset: 25;
				transition: 1s;
			}
			#rebin
			{
				stroke-dasharray: 90;
				stroke-dashoffset: 180;
				transition: 1s;
			}
			#reyetop
			{
				transition: 1s;
			}
			#d1:hover #lebout
			{
				stroke: gold;
			}
			#d1:hover #lebin
			{
				stroke: gold;
			}
			#d1:hover #leyetop
			{
				stroke: blue;
			}
			#d1:hover #rebout
			{
				stroke: gold;
			}
			#d1:hover #rebin
			{
				stroke: gold;
			}
			#d1:hover #reyetop
			{
				stroke: blue;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<svg height='1000' width='1000'>
				<circle id="lebout" cx='280' cy='268' r='50' stroke='transparent' stroke-width='2' fill='none'></circle>
				<circle id="lebin" cx='280' cy='275' r='30' stroke='transparent' stroke-width='2' fill='none'></circle>
				<path id="leyetop" d='M 400 300 q -100 -50 -300 -50' stroke='transparent' fill='black' stroke-width='5' stroke-linecap='round'></path>
				<circle id="rebout" cx='720' cy='268' r='50' stroke='transparent' stroke-width='2' fill='none'></circle>
				<circle id="rebin" cx='720' cy='275' r='30' stroke='transparent' stroke-width='2' fill='none'></circle>
				<path id="reyetop" d='M 600 300 q 100 -50 300 -50' stroke='transparent' fill='black' stroke-width='5' stroke-linecap='round'></path>
			</svg>
		</div>
	</body>
</html>